<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 表格头部标题部分 -->
      <el-row class="titlecard">
        <el-col :span="22">
          <span class="titlespan">说明：目前支持学科和关键字条件筛选</span>
        </el-col>
        <el-col :span="2">
          <el-button
            class
            size="small"
            icon="el-icon-edit"
            type="success"
            @click="$router.push('/questions/new')"
          >新增试题</el-button>
        </el-col>
      </el-row>
      <!-- 表格头form表单部分 -->
      <el-form label-width="80px" ref="slectrefs" :model="query">
        <!-- 第一行学科 -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科" prop="subjectID">
              <el-select
                size="small"
                v-model="query.subjectID"
                placeholder="请选择学科"
                @change="geterjilist(query.subjectID)"
              >
                <el-option
                  v-for="(item,index) in xuekedata "
                  :key="index"
                  :label="item.subjectName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select size="small" v-model="query.catalogID" placeholder="请选择" prop="catalogID">
                <el-option
                  v-for="item in erjidata"
                  :key="item.value"
                  :label="item.directoryName"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" prop="tags">
              <el-select size="small" v-model="query.tags" placeholder="请选择">
                <el-option
                  v-for="item in tagdata"
                  :key="item.id"
                  :label="item.tagName"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" prop="keyword" style="width:280px">
              <el-input placeholder="题干搜索" size="small" v-model="query.keyword"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行实体类型 -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型" prop="questionType">
              <el-select size="small" v-model="query.questionType" placeholder="请选择">
                <el-option
                  v-for="item in questionType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" prop="difficulty">
              <el-select size="small" v-model="query.difficulty" placeholder="请选择">
                <el-option
                  v-for="item in nandu"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" prop="direction">
              <el-select size="small" v-model="query.direction" placeholder="请选择">
                <el-option
                  v-for="(item ,index) in direction"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入者" prop="creatorID">
              <el-select size="small" v-model="query.creatorID" placeholder="请选择">
                <el-option
                  v-for="item in usersList"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三行实体类型 -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="译文备注" prop="remarks">
              <el-input size="small" v-model="query.remarks" style="width:198px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" prop="shortName">
              <el-input size="small" style="width:198px" v-model="query.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市" prop="province">
              <el-col :span="11" style=" margin-right: 15px;">
                <el-select
                  @change="change(query.province)"
                  size="small"
                  v-model="query.province"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item,index) in provincesList"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="11">
                <el-select size="small" v-model="query.city" placeholder="请选择">
                  <el-option
                    v-for="(item,index) in cityList"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button size="small" @click="$refs.slectrefs.resetFields()">清除</el-button>
              <el-button size="small" @click="SearchSlect" type="primary">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!--/ 表格头form表单部分 -->
      <!-- total标题部分 -->
      <el-alert :closable="false" :title="`数据总共${total}条`" type="info" show-icon class="elalert"></el-alert>
      <!-- 表格list部分 -->
      <el-table :loading="tableLoading" :data="tablist" style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="180"></el-table-column>
        <el-table-column prop="subject" label="学科"></el-table-column>
        <el-table-column prop="catalog" label="目录"></el-table-column>
        <el-table-column prop="address" label="题型">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType==='1'">单选</span>
            <span v-else-if="scope.row.questionType==='2'">多选</span>
            <span v-else>简单</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="题干">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="录入时间">
          <template slot-scope="scope">{{scope.row.addDate | dateFormeat }}</template>
        </el-table-column>
        <el-table-column prop="address" label="艰难">
          <template slot-scope="scope">
            <span v-if="scope.row.difficulty==='1'">简单</span>
            <span v-else-if="scope.row.difficulty==='2'">一般</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人"></el-table-column>
        <el-table-column width="200px" label="操作">
          <template slot-scope="scope">
            <el-button
              @click="detilong(scope.row)"
              plain
              type="primary"
              size="small"
              circle
              icon="el-icon-view"
              title="预览"
            ></el-button>
            <el-button
              @click="Edtshiti(scope.row.id)"
              plain
              type="success"
              size="small"
              circle
              icon="el-icon-edit"
              title="修改"
            ></el-button>
            <el-button
              @click="Removshiti(scope.row)"
              plain
              type="danger"
              size="small"
              circle
              icon="el-icon-delete"
              title="删除"
            ></el-button>
            <el-button
              @click="Addjingxuan(scope.row)"
              plain
              type="warning"
              size="small"
              circle
              icon="el-icon-check"
              title="加入精选"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--/ 表格list部分 -->
      <!-- 表格分页 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-size="query.pagesize"
        :page-sizes="[5, 10, 20, 50]"
        :total="total"
        layout=" prev, pager, next,  sizes, jumper"
      ></el-pagination>
    </el-card>
    <!-- 弹窗 -->
    <!--  <el-dialog title="提示" :visible.sync="isdtilog" width="30%" center>

      <el-button right @click="isdtilog = false">取 消</el-button>
    </el-dialog>-->
    <!-- <dailong v-model="isdtilog" :isdtilogdata="isdtilogdata" /> -->

    <!--  <dailong v-show="isdtilog" :isdtilogdata="isdtilogdata" :isdtilog="isdtilog" @close="close" /> -->
    <div class="show">
      <el-dialog title="题目预览" :visible.sync="isprewshow" width="50%" :before-close="handleClose">
        <el-form ref="previewForm" :model="datas">
          <el-row>
            <!-- v-model="ruleForm.name" -->
            <el-col :span="6">
              <el-form-item label="【题型】 :">
                <div v-if="Number(datas.questionType)===1">{{ '单选' }}</div>
                <div v-else-if="Number(datas.questionType)===2">{{ '多选' }}</div>
                <div v-else-if="Number(datas.questionType)===3">{{ '简答' }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="【编号】 :">{{ datas.id }}</el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="【难度】 :">
                <span v-if="Number(datas.difficulty) === 1">{{ '简单' }}</span>
                <span v-else-if="Number(datas.difficulty) === 2">{{ '一般' }}</span>
                <span v-else-if="Number(datas.difficulty) === 3">{{ '困难' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="【标题】 :">{{ datas.tags}}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <!-- v-model="ruleForm.name" -->
            <el-col :span="6">
              <el-form-item label="【学科】 :">{{ datas.subjectName }}</el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="【目录】 :">{{ datas.directoryName }}</el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="【方向】 :">{{ datas.direction }}</el-form-item>
            </el-col>
          </el-row>
          <hr class="hStyle" />
          <el-form-item label="【题干】 :"></el-form-item>
          <template>
            <div v-html="datas.question"></div>
          </template>
          <template>
            <div v-if="Number(datas.questionType)===1">{{ '单选选项：(以下选中的内容为该选项的答案)' }}</div>
            <div v-else-if="Number(datas.questionType)===2">{{ '多选选项：(以下选中的内容为该选项的答案)' }}</div>
            <div v-else-if="Number(datas.questionType)===3">{{ '简答：(以内容为该题的答案)' }}</div>
          </template>
          <el-radio-group
            v-model="radio"
            v-if="Number(datas.questionType)===1"
            @change="changeRadio"
          >
            <el-radio
              :label="item.isRight"
              v-for="item in datas.options"
              :key="item.id"
            >{{ item.code }}</el-radio>
          </el-radio-group>
          <el-checkbox-group
            v-model="checkList"
            v-else-if="Number(datas.questionType)===2"
            @change="changeRadio"
          >
            <el-checkbox
              :label="item.isRight"
              v-for="item in datas.options"
              :key="item.id"
            >{{ item.code }}</el-checkbox>
          </el-checkbox-group>
          <hr class="hStyle" />
          <el-form-item label="【参考答案】 :">
            <el-button type="danger" size="small" @click="showVid">视频答案预览</el-button>
            <div class="vidShow" v-if="videoshow">
              <video :src="datas.videoURL" controls="controls"></video>
            </div>
          </el-form-item>
          <hr class="hStyle" />
          <el-form-item label="【答案解析】 :">
            <div class="answer">
              <span v-html="datas.answer"></span>
            </div>
          </el-form-item>
          <hr class="hStyle" />
          <el-form-item label="【题目备注】 :">{{ datas.remarks + ' 有答案' }}</el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="
            Clonse">关闭</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
/* import dayjs from 'dayjs'  使用的自定时间过滤器 */
// eslint-disable-next-line import/no-duplicates
import { list as xueketList } from '@/api/hmmm/subjects'// 学科列表
import { list } from '@/api/hmmm/questions'
import { list as geterjiList } from '@/api/hmmm/directorys' // 二级目录列表
// eslint-disable-next-line import/no-duplicates
import { list as getlist } from '../../api/hmmm/subjects' // 获取题库列表
import { list as tagList } from '@/api/hmmm/tags' // 标签类表
import { questionType, direction } from '@/api/hmmm/constants' // 导入方向以及试题类型
import { list as userLit } from '@/api/base/users' // 获取用户
import { provinces, citys } from '@/api/hmmm/citys' // 城市
import { remove, choiceAdd } from '@/api/hmmm/questions' // 删除，添加精选
import Dailong from '../components/questions-preview' //导入弹窗组件 
import { detail } from '@/api/hmmm/questions'// 获取数据列表
export default {
  name: 'questions',
  data() {
    return {
      // 初始化数据
      isprewshow: false,
      total: 0,
      xuekeid: '',
      tableLoading: false,
      query: {
        subjectID: null, // 学科
        questionType: null, // 试题类型
        remarks: null, //  题目备注
        catalogID: null, //  二级目录
        difficulty: null, // 难度
        tags: null, // 标签
        direction: null, //  方向
        shortName: null, //  企业简称
        city: null, //  城市
        province: null, // 省份
        keyword: null, //  关键字
        creatorID: null, //  录入人
        page: 1,
        pagesize: 5
      },
      page: 1,
      pagesize: 5,
      value: '',
      questionType: questionType,
      direction: direction,
      listquespanls: [],
      tablist: [], // 试题表格数据
      xuekedata: [], // 学科数据
      erjidata: [], // 二级目录数据
      tagdata: [], // tag标
      nandu: [{
        value: 1,
        label: '简单'
      }, {
        value: 2,
        label: '一般'
      }, {
        value: 3,
        label: '困难'
      }], // 此处可以导入api数据
      usersList: [], // 用户
      provincesList: [],
      cityList: [],
      isdtilog: false, // 是否开启弹窗
      isdtilogdata: [], // 弹窗传值数据
      datas: [],
      optinos: [],
      radio: 1,
      checkList: [1],
      videoshow: false
    }
  },
  methods: {
    async getlist() {
      const { data } = await getlist()
      console.log(data)
      this.listquespanls = data
    },
    // 获取表格数据
    async tablelist() {
      this.tableLoading = true
      try {
        const { data } = await list(this.query)
        console.log(data, '22')
        this.tablist = data.items
        this.total = data.counts
      } catch (error) {
        console.log(error)
      }
      this.tableLoading = false
    },
    // 获取学科数据
    async getxueke() {
      try {
        const { data } = await xueketList()
        console.log(data, '333')
        this.xuekedata = data.items
      } catch (error) {

      }
    },
    // change事件触发二级目录
    async geterjilist(id) {
      try {
        const { data } = await geterjiList(id)
        console.log(data, '444')
        this.erjidata = data.items
        this.gettag(id)
      } catch (error) {
        alert('获取失败')
      }
    },
    // 获取标签
    async gettag(id) {
      try {
        const { data } = await tagList({
          pagesize: 11,
          subjectID: id
        })
        console.log(data, 'tag')
        this.tagdata = data.items
        console.log(this.tagdata, '000')
      } catch (error) {
        alert('shibai')
      }
    },
    // 获取用户数据
    async getUser() {
      const res = await userLit()
      // console.log(res)
      this.usersList = res.data.list
      console.log(this.usersList, ' this.usersList')
    },
    // 分页
    handleSizeChange(newcurrent) {
      this.query.pagesize = newcurrent
      this.tablelist()
    },
    handleCurrentChange(newsize) {
      this.query.page = newsize
      this.tablelist()
    },
    getCity() {
      this.provincesList = provinces() // 城市
    },
    change(val) {
      this.cityList = citys(val) // 省份
      // console.log(this.cityList)
      this.query.city = null
    },
    // 表单搜索
    SearchSlect() {
      this.$refs.slectrefs.validate((valid) => {
        if (valid) {
          this.query.page = 1,
            this.tablelist()
        }

      })
    },
    // 试题删除
    Removshiti(val) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          await remove(val)
          this.tablelist()
        } catch (error) {

        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 加入精选
    Addjingxuan(val) {
      this.$confirm('此操作将永加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          this.$message({
            type: 'success',
            message: '加入精选成功!'
          });
          await choiceAdd(val)
          this.tablelist()
        } catch (error) {

        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消加入精选'
        });
      });
    },
    // 修改试题跳转到录入页面
    Edtshiti(id) {
      this.$router.push({
        path: 'new', query: { id: id }
      })
    },
    // 弹窗
    async detilong(val) {

      try {
        const { data } = await detail(val)
        console.log(data, '0000000000000000')
        this.$message.success('成功')
        this.datas = data
        this.option = data.options
      } catch (error) {
        this.$message('失败稍后再试...')
      }


      this.isprewshow = true

    },
    handleClose() {
      this.isprewshow = false
    },
    Clonse(val) {
      this.isprewshow = !this.isprewshow
    },
    showVid() {
      this.videoshow = true
    },
    changeRadio() {
      this.radio = 1
      this.checkList = [1]
    }
  },
  created() {
    this.getlist()
    this.tablelist()// 表格数据列表
    this.getxueke()// 学科列表
    this.getUser() // 获取用户
    this.getCity()
  },
  components: {
    Dailong //导入弹窗组件 */
  }

}
</script>

<style rel="stylesheet/scss" scoped lang='less'>
.container {
  .box-card {
    .elalert {
      margin-bottom: 15px;
    }
    .titlecard {
      margin-bottom: 15px;
    }
    margin: 10px 8px;
    .titlespan {
      color: pink;
    }
  }
  .el-pagination {
    text-align: right;
  }
}
</style>
